<template>
  <!-- 热搜数据详情 -->
  <div class="popularityDetails_container">
    <!-- <div class="box"></div> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in swiperList" :key="index">
        <img :src="item.pic" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <div class="popularity">
      <div class="popularity_name">{{ DetaTitle.name }}</div>
      <div class="popularity_characteristic">
        {{ DetaTitle.characteristic }}
      </div>
      <div class="popularity_price">
        <div class="popularity_prices">
          <div style="font-size: 16px; color: red; font-weight: 600">
            低价：￥{{ DetaTitle.minPrice }}
          </div>
          <div style="font-size: 12px; color: gray">
            原价：￥{{ DetaTitle.originalPrice }}
          </div>
        </div>
        <div style="font-size: 12px; color: gray">
          售出:{{ DetaTitle.stores }}
        </div>
      </div>
      <div>
        <p v-html="Details.content" class="contev"></p>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="danger" text="立即购买" @click="onClick" />
    </van-goods-action>

    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <div class="aa">
        <div class="aa_img">
          <img :src="DetaTitle.pic" alt="" />
        </div>

        <div class="aa_title">
          <p style="font-size: 14px; font-weight: 600; color: green">
            {{ DetaTitle.name }}
          </p>
          <p>￥{{ DetaTitle.minPrice }}</p>
        </div>
      </div>
      <div class="box_aa_childsCurGoods">
        <div
          class="aa_childsCurGoods"
          v-for="(item, index) in DetaCart"
          :key="index"
        >
          {{ item.name }}
          <div
            v-for="(items, index) in item.childsCurGoods"
            :key="index"
            class="aa_childsCurGoods_name"
          >
            {{ items.name }}
          </div>
        </div>
      </div>

      <div class="aa_num">数量<van-stepper v-model="value" /></div>

      <van-button type="primary" block @click="onClickadd(DetaTitle)"
        >立即购买</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { Tab, Tabs } from "vant";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
import { Popup } from "vant";
import { Stepper } from "vant";
import { Button } from "vant";
import "./popularityDetails.css";

Vue.use(Button);
Vue.use(Stepper);
Vue.use(Popup);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  data() {
    return {
      swiperList: [],
      DetaTitle: [],
      Details: [],
      show: false,
      value: 1,
      DetaCart: [],
    };
  },
  mounted() {
    this.$Api
      .popularity({ params: { id: this.$route.query.id } })
      .then((res) => {
        console.log(res);
        this.Details = res.data.data; //	商品详细介绍
        this.DetaTitle = res.data.data.basicInfo; //商品基础信息【同列表接口的返回参数】
        this.DetaCart = res.data.data.properties; //该商品可选的规格和尺寸单元，对应不同的价格和库存数
        this.swiperList = res.data.data.pics; //	本商品的多少展示图片
        console.log(this.DetaCart);
        // console.log(res.data.data);
      });
  },
  methods: {
    onClick() {
      this.show = true;
    },
    onClickadd(item) {
      var token = localStorage.getItem("token");
      if (token) {
        this.$store.dispatch("getCart", item);
      } else {
        this.$router.pushRouteByQuery("/login");
      }
    },
  },
};
</script>

<style  scoped>
.box {
  width: 100%;
  height: 64px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.van-swipe__track {
  height: 80%;
}
.popularity {
  width: 100%;
  /* background: red; */
}
.popularity_name {
  width: 100%;
  font-size: 20px;
  color: #464646;
}
.popularity_characteristic {
  width: 100%;
  font-size: 15px;
  color: #b8b8b8;
  margin-top: 10px;
}
.popularity_price {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}
.popularity_prices {
  width: 70%;
  display: flex;
  align-items: center;
}
.products {
  width: 100%;
  background: #e6e6e6;
}
.aa {
  width: 100%;
  display: flex;
  /* justify-content: flex-end; */
}
.aa_img {
  width: 40%;
}
.aa_img img {
  width: 60%;
}
.aa_title {
  width: 60%;
  /* background-color: red; */
  display: inline-flex;
  align-items: center;
}
.aa_num {
  width: 100%;
  display: inline-flex;
  justify-items: center;
}
.contev {
  width: 100%;
  font-size: 16px;
  line-height: 1.5rem;
}
.contev img {
  width: 100% !important;
  height: 100% !important;
}
.contev p {
  height: 100vh;
}
.contev[data-v-8701b8fa] {
  font-size: 12px;
}
.popularity_name[data-v-8701b8fa] {
  width: 100%;
  font-size: 14px;
  color: #464646;
}
.popularityDetails_container {
  font-size: 16px;
}
.box_aa_childsCurGoods{
  width: 100%;
  display: inline-flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.aa_childsCurGoods {
  width: 100%;
 
}
 .aa_childsCurGoods_name {
  /* border: 1px solid red; */
  width: 100%;
  display: inline-flex;
  border: 1px solid;
   height: 30px;
  margin-left: 2px;
}
</style>